<template>
  <van-row class="home">
    <van-row class="nav" gutter="20">
      <!-- <van-col
        class="enteral-nutrition"
        span="24"
        @click="enteralNutritionEvent(1)"
      >
        <van-row align="center">
          <van-col span="11">
            <van-row>
              <span class="subtitle">护肠有道</span>
            </van-row>
            <van-row>
              <span class="title">肠内营养</span>
            </van-row>
            <van-row class="describe">
              <van-col style="opacity: 0.8" span="24">
                提供全面均衡营养;保护肠道健康
              </van-col>
            </van-row>
          </van-col>
          <van-col span="13">
            <img src="@/assets/img/stomachIcon.png" alt="" />
          </van-col>
        </van-row>
      </van-col>
      <van-col
        @click="enteralNutritionEvent(2)"
        span="24"
        class="therapeutic-diet"
      >
        <van-row align="center">
          <van-col span="11">
            <van-row>
              <span class="subtitle" style="color: #ffb750">营养调理</span>
            </van-row>
            <van-row>
              <span class="title">治疗膳食</span>
            </van-row>
            <van-row class="describe">
              <van-col style="opacity: 0.8" span="24">
                治疗膳食就是辅助治疗各类基础疾病的全营养膳食
              </van-col>
            </van-row>
          </van-col>
          <van-col span="13">
            <img src="@/assets/img/medicineIcon.png" alt="" />
          </van-col>
        </van-row>
      </van-col> -->
      <van-col
        @click="enteralNutritionEvent(3)"
        span="24"
        class="nutritional-meals"
      >
        <van-row align="center">
          <van-col span="11">
            <van-row>
              <span class="subtitle" style="color: #5089ff">科学配方</span>
            </van-row>
            <van-row>
              <span class="title">普通餐</span>
            </van-row>
            <van-row class="describe">
              <van-col style="opacity: 0.8" span="24">
                普通餐是由高级厨师精心制作
              </van-col>
            </van-row>
          </van-col>
          <van-col span="13">
            <img src="@/assets/img/knifeAndFork.png" alt="" />
          </van-col>
        </van-row>
      </van-col>
    </van-row>
    <PhoneCode
      :jumpPath="state.jumpPath"
      @confirm="phoneCodeConfirm"
    ></PhoneCode>
  </van-row>
</template>
<script setup>
import { nextTick, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import PhoneCode from "@/components/popUp/phoneCode.vue";
import { siteTitle } from "@/settings";
import { getStorage, setStorage } from "@/utils/common";
import { showNotify } from "vant";
const router = useRouter();
const route = useRoute();
const state = reactive({
  tokenFlag: false,
  token: getStorage(`${siteTitle}_token`),
  orgName: getStorage(`${siteTitle}_orgName`),
  orgNameType: 0,
});

// 二维码数据
const qrCodeData = {
  bedNo: route.query.bedNo,
  wardCode: route.query.wardCode,
};
setStorage(`${siteTitle}_qrCodeData`, JSON.stringify(qrCodeData));

const enteralNutritionEvent = (type) => {
  router.push({ name: "orderingDishes", query: { jumpPath: 3 } });
  if (!state.token) {
    state.tokenFlag = true;
    state.jumpPath = type;
  } else {
  }
};
const phoneCodeConfirm = () => {
  state.tokenFlag = false;
};
</script>
<style lang="scss" scoped>
.home {
  padding: 0 16px;
  padding-bottom: 70px;
  .publicize {
    ::v-deep .van-grid-item__content--center {
      padding: 0;
    }
    ::v-deep .van-grid-item__content:after {
      border: none;
    }
  }

  .swipe-content {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
    margin-top: 16px;
    img {
      height: 160px;
      width: 100%;
      object-fit: cover;
      border-radius: 10px;
    }
  }
  // .my-swipe .van-swipe-item {
  //   color: #fff;
  //   font-size: 20px;
  //   line-height: 150px;
  //   text-align: center;
  //   background-color: #39a9ed;
  // }

  .nav {
    padding-top: 10px;
    width: 100%;
  }
  .health-counseling {
    background: #fff;
    border-radius: 10px;
    margin-top: 0;
    width: 100%;
    overflow: hidden;
    .van-card {
      width: 100%;
      background: #fff;
      padding-right: 5px;
      padding: 0;
      position: relative;
      margin-bottom: 10px;
      ::v-deep .van-card__thumb {
        width: 45% !important;
        height: 100px;
        border-radius: 10px;
        overflow: hidden;
        border: 0.5px solid #e7e7e7;
        img {
          width: 100%;
          object-fit: cover;
        }
        .van-skeleton-image {
          width: 100%;
        }
      }
      ::v-deep .van-card__content {
        text-align: left;
        min-height: inherit;
      }
      ::v-deep .van-card__title {
        font-size: 14px;
        margin-bottom: 10px;
        margin-top: 5px;
      }
      .van-button {
        padding: 14px 14px;
        float: right;
        color: #08d781;
      }
      .van-button::after {
        border: 1px solid #08d781;
      }
    }
  }
  .enteral-nutrition,
  .therapeutic-diet,
  .nutritional-meals {
    position: relative;
    background: url("@/assets/img/enteralNutrition.png");
    background-size: 100% 100%;
    height: 190px;
    padding: 24px;
    color: #fff;
    overflow: hidden;
    margin-bottom: 10px;
    .title {
      font-size: 24px;
      font-weight: bold;
      margin-top: 10px;
      margin-bottom: 5px;
    }
    .describe {
      text-align: left;
    }
    img {
      position: absolute;
      width: 140px;
      height: 140px;
      transform: translateY(-50%);
      top: 50%;
      right: 10%;
    }
  }
  .therapeutic-diet {
    background-image: url("@/assets/img/therapeuticDiet.png");
  }
  .nutritional-meals {
    background-image: url("@/assets/img/nutritionalMeals.png");
  }
  ::v-deep .video-content {
    padding: 0 !important;
    // padding-bottom: 60px !important;
    ::v-deep .van-grid-item {
      overflow: hidden;
    }
    .poster-content {
      width: 100%;
      height: 100px;
      position: absolute;
      z-index: 1;
      border-radius: 10px;
      overflow: hidden;
      border: 0.5px solid #e7e7e7;
    }
    .play-icon {
      width: 36px;
      height: 36px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    video {
      width: 100%;
      height: 100px;
      border-radius: 10px;
      object-fit: cover;
    }
  }

  .subtitle {
    display: inline-block;
    background: #fff;
    color: #08d781;
    padding: 6px 10px;
    border-radius: 15px;
  }
}
</style>
